<template>
    <view>
        <view>
            <l-segment @linchange="changeTabs" active-color="orange" :active-key="type">
                <l-segment-item tab="全部" key="all" />
                <l-segment-item tab="待接单" key="one" />
                <l-segment-item tab="待核销" key="two" />
                <l-segment-item tab="已完成" key="three" />
                <l-segment-item tab="已退款" key="four" />
            </l-segment>
        </view>
        <scroll-view :scroll-y="true" :style="'height:' + height + 'px'" @scrolltolower="more">
            <block v-for="(item, index) in orderList" :key="index">
                <view
                    class="order-info-container orderdetail-card"
                    @tap.stop.prevent="querOrderDetail"
                    :data-order-id="item.id"
                    :data-status-remark="item.statusRemark"
                    :data-order-btn="item.btnName"
                    :data-order-name="item.newName"
                    :data-meal-name="item.newNames"
                >
                    <view class="user-info">
                        <image class="headerimg" :src="item.userPath"></image>
                        <view class="user-info-detail order-detail-flex14">
                            <view class="user-info-detail-name">{{ item.userNickname == null ? '暂无昵称' : item.userNickname }}</view>
                            <view class="user-info-detail-phone orderlist-server-name" :data-item="item">服务项目:</view>
                            <view class="user-info-detail-phone orderlist-server-detail">{{ item.newName }}</view>
                        </view>
                        <view class="order-detail-flex5 order-list-order-state-text">
                            {{ item.statusRemark }}
                        </view>
                    </view>
                    <view class="user-apoint">
                        <view class="orderdetail-shopname-wrap">
                            <view class="orderlist-item">
                                <image class="shopicon mr-10" :src="shopimgUrl + 'cut.png'" />
                                <text class="orderlist-title">服务美发师：</text>
                            </view>
                            <view class="orderlist-item-1 order-detail-text-align-right">{{ item.stylistname }}({{ item.nexus > 0 ? '店内' : '网约' }})</view>
                        </view>
                        <view class="orderdetail-shopname-wrap">
                            <view class="orderlist-item">
                                <image class="shopicon mr-10" :src="shopimgUrl + 'clock.png'" />
                                <text class="orderlist-title">预约时间：</text>
                            </view>
                            <view class="orderlist-item-1 order-detail-text-align-right" v-if="item.present == '当面付'">当面付</view>
                            <view class="orderlist-item-1 order-detail-text-align-right" v-else>{{ item.orderDate }} {{ item.orderType == 1 ? '(在线排队)' : '(固定时间)' }}</view>
                        </view>
                        <view class="orderdetail-shopname-wrap">
                            <view class="orderlist-item">
                                <image class="shopicon mr-10" :src="shopimgUrl + 'order.png'" />
                                <text class="orderlist-title">订单号:</text>
                            </view>
                            <view class="orderlist-item-1 order-detail-text-align-right">{{ item.orderno }}</view>
                        </view>
                        <view class="orderdetail-shopname-wrap">
                            <view class="orderlist-item">
                                <image class="shopicon mr-10" :src="shopimgUrl + 'money.png'" />
                                <text class="orderlist-title">支付金额:</text>
                            </view>
                            <view class="orderlist-item-1 order-detail-text-align-right order-price">¥{{ item.payamount }}</view>
                        </view>
                    </view>
                    <view class="order-list-user-action">
                        <view
                            v-if="item.btnName1"
                            @tap.stop.prevent="onClickBtn"
                            :data-order-id="item.id"
                            :data-item="item"
                            :data-status-remark="item.statusRemark"
                            :data-order-btn="item.btnName1"
                        >
                            <view class="order-list-user-action-btn1">{{ item.btnName1 }}</view>
                        </view>
                        <view v-if="item.btnName" @tap.stop.prevent="onClickBtn" :data-order-id="item.id" :data-status-remark="item.statusRemark" :data-order-btn="item.btnName">
                            <view class="order-list-user-action-btn">{{ item.btnName }}</view>
                        </view>
                        <view
                            v-if="item.btnName2 && item.reviewsCount > 0"
                            @tap.stop.prevent="onClickBtn"
                            :data-order-id="item.id"
                            :data-status-remark="item.statusRemark"
                            :data-order-btn="item.btnName2"
                        >
                            <view class="order-list-user-action-btn2">{{ item.btnName2 }}</view>
                        </view>
                        <view
                            v-if="item.btnName3 && item.reviewsCount == 0"
                            @tap.stop.prevent="onClickBtn"
                            :data-order-id="item.id"
                            :data-status-remark="item.statusRemark"
                            :data-order-btn="item.btnName3"
                        >
                            <view class="order-list-user-action-btn">{{ item.btnName3 }}</view>
                        </view>
                    </view>
                </view>
            </block>
            <view class="w-100">
                <van-empty v-if="orderList.length == 0 || orderList == null" description="暂无订单" />
            </view>
        </scroll-view>
    </view>
</template>

<script>
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            size: 10,
            page: 1,
            orderList: [],
            type: '',
            height: 0,
            shopimgUrl: app.globalData.shopimgUrl
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.getSystemInfo({
            success: (res) => {
                this.setData({
                    height: res.windowHeight
                });
            }
        });
        let orderStatus = options.orderStatus;

        if (orderStatus) {
            this.setData({
                type: orderStatus
            });
            this.orderList = [];
            this.page = 1;
            this.queryOrderList(orderStatus);
        } else {
            this.setData({
                type: 'all'
            });
            this.queryAll();
        }
    },
    methods: {
        queryAll() {
            this.queryOrderList('one');
            this.queryOrderList('two');
            this.queryOrderList('three');
            this.queryOrderList('four');
        },

        changeTabs(event) {
            const type = event.detail.activeKey;
            this.setData({
                orderList: [],
                page: 1 // type: type
            });

            if ('all' == type) {
                this.setData({
                    type: type
                });
                this.queryOrderList(type);
            } else {
                this.setData({
                    type: type
                });
                this.queryOrderList(type);
            }
        },

        /* 查询订单列表 */
        queryOrderList(type) {
            let storeId = uni.getStorageSync('storeId');
            let size = this.size;
            let page = this.page;

            if (!storeId) {
                uni.navigateTo({
                    url: '/pages/login/index'
                });
            }

            let status = 1;
            let statusRemark = '';
            let btnName = '';
            let btnName1 = '';
            let btnName2 = '';
            let btnName3 = '';

            if ('one' === type) {
                status = 1;
                statusRemark = '待接单';
                btnName = '接单'; // btnName1 = "拒绝";
            } else if ('two' === type) {
                status = 2;
                statusRemark = '待核销';
                btnName = '查看详情'; //门店端没有去核销功能
                // btnName1 = "取消订单";
            } else if ('three' === type) {
                status = 3;
                statusRemark = '已完成';
                btnName2 = '查看评价';
                btnName3 = '查看详情'; // btnName1 = "删除订单";
            } else if ('four' === type) {
                status = 4;
                statusRemark = '已退款';
                btnName3 = '查看详情'; // btnName2 = "删除订单";
            } else if ('all' === type) {
                status = 0;
            }

            _request
                .get('/order/getOrderPage', {
                    storeId: storeId,
                    page: page,
                    size: size,
                    status: status
                })
                .then((res) => {
                    if (res.data.data != null) {
                        let list = res.data.data.map((item) => {
                            let realName = btnName;
                            let orderDate = this.getYMDHMS(item.ordertime);
                            let stratDate = this.getYMDHMS(item.starttime);
                            let payamount = item.payamount || 0;
                            let name = item.ordername;
                            let names = name.indexOf('#');
                            let newName;
                            let newNames;

                            if (names != -1) {
                                newName = name.substring(0, names); // 服务项目

                                newNames = name.substring(names + 1); // 套餐券
                            } else {
                                newName = name;
                            }

                            let present = item.ordername.slice(0, 3);

                            if ('all' === type) {
                                statusRemark = '';
                                btnName = '';
                                btnName1 = '';
                                btnName2 = '';
                                btnName3 = '';

                                if ([3, 8, 14].includes(item.status)) {
                                    statusRemark = '待接单'; //  0 平台 1 店内

                                    if (item.nexus == 0) {
                                        btnName = '提醒接单';
                                    } else {
                                        btnName = '接单';
                                    }
                                } else if ([4, 6, 7, 9, 10].includes(item.status)) {
                                    statusRemark = '待核销';
                                    btnName = '查看详情';
                                } else if ([11, 18].includes(item.status)) {
                                    statusRemark = '已完成';
                                    btnName2 = '查看评价';
                                    btnName3 = '查看详情';
                                } else if ([5, 12, 13, 15].includes(item.status)) {
                                    statusRemark = '已退款';
                                    btnName3 = '查看详情';
                                }
                            } // if (status == 2) {
                            //   realName = "查看详情"
                            // }

                            if (status == 1) {
                                //  0 平台 1 店内
                                if (item.nexus == 0) {
                                    btnName = '提醒接单';
                                } else {
                                    btnName = '接单';
                                }
                            } //  if (status == 4) {
                            //   realName = "查看详情"
                            // }

                            return {
                                ...item,
                                statusRemark,
                                orderDate,
                                stratDate,
                                newName,
                                newNames,
                                btnName,
                                btnName1,
                                btnName2,
                                btnName3,
                                present,
                                payamount: payamount.toFixed(2)
                            };
                        });
                        this.setData({
                            orderList: [...this.orderList, ...list]
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        getYMDHMS(timestamp) {
            if (!timestamp) {
                return '';
            }

            let time = new Date(timestamp);
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let date = time.getDate();
            let hours = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();

            if (month < 10) {
                month = '0' + month;
            }

            if (date < 10) {
                date = '0' + date;
            }

            if (hours < 10) {
                hours = '0' + hours;
            }

            if (minute < 10) {
                minute = '0' + minute;
            }

            if (second < 10) {
                second = '0' + second;
            }

            return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second;
        },

        /* 订单详情 */
        querOrderDetail(event) {
            var orderId = event.currentTarget.dataset.orderId;
            const statusRemark = event.currentTarget.dataset.statusRemark;
            const orderBtn = event.currentTarget.dataset.orderBtn; // const orderName = event.currentTarget.dataset.orderName;

            const mealName = event.currentTarget.dataset.mealName;
            uni.navigateTo({
                url: '/pages/orderdetail/orderdetail?orderId=' + orderId + '&orderStatus=' + statusRemark + '&orderBtn=' + orderBtn + '&mealName=' + mealName
            });
        },

        onClickBtn(event) {
            var orderId = event.currentTarget.dataset.orderId;
            const orderBtn = event.currentTarget.dataset.orderBtn;
            let vm = this;

            if (orderBtn && '查看评价' == orderBtn) {
                uni.navigateTo({
                    url: '/pages/commentdetail/commentdetail?orderId=' + event.currentTarget.dataset.orderId
                });
            } else if (orderBtn && '接单' == orderBtn) {
                _request
                    .get('/stylistOrder/acceptOrder', {
                        orderId: orderId
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            uni.showToast({
                                title: '接单成功',
                                icon: 'success',
                                duration: 2000
                            });
                            vm.setData({
                                orderList: [],
                                page: 1
                            });
                            setTimeout(() => {
                                vm.queryOrderList('one');
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'error',
                                duration: 2000
                            });
                        }
                    });
            } else if (orderBtn && '提醒接单' == orderBtn) {
                _request
                    .get('/order/remindStylist', {
                        orderId: orderId,
                        status: '1'
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            uni.showToast({
                                title: '提醒成功',
                                icon: 'success',
                                duration: 2000
                            });
                            vm.setData({
                                orderList: [],
                                page: 1
                            });
                            setTimeout(() => {
                                vm.queryOrderList('one');
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
            } else {
                vm.querOrderDetail(event);
            }
        },

        more: function () {
            this.page++;
            this.queryOrderList(this.type);
        }
    }
};
</script>
<style>
.order-info-container {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    justify-content: space-between;
}
.orderdetail-card {
    width: 96%;
    border-radius: 5px;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 2% auto;
}
.user-info {
    display: flex;
    flex-direction: row;
}
/* 头像 */
.headerimg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
}
.user-info-detail {
    margin-left: 40rpx;
}
.user-info-detail-name {
    font-weight: 700;
}
.user-info-detail-phone {
    color: #666;
}
.user-info-detail-phone {
    color: #666;
    font-size: 28rpx;
}
.user-apoint {
    margin: 10rpx 0;
    font-size: 28rpx;
}
.orderdetail-shopname-wrap {
    clear: both;
}
.orderlist-item {
    width: 32%;
    float: left;
    height: 40rpx;
    margin-top: 15rpx;
}
.orderlist-item-1 {
    width: 67%;
    float: left;
    height: 40rpx;
    margin-top: 15rpx;
}
.order-detail-flex9 {
    flex: 9;
}
.order-detail-flex5 {
    flex: 5;
}
.order-detail-flex2 {
    flex: 2;
}
.order-detail-flex14 {
    flex: 14;
}
.shopicon {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    top: 6rpx;
    float: left;
}
.orderlist-title {
    font-size: 27rpx;
    line-height: 40rpx;
    text-align: left;
    height: 40rpx;
    display: block;
    float: left;
}
.order-detail-text-align-right {
    text-align: right;
    color: #999999;
    font-size: 27rpx;
    line-height: 40rpx;
}
.order-list-order-state-text {
    font-size: 30rpx;
    font-weight: 600;
    text-align: right;
    color: #ff8722;
}

.order-price {
    color: #ff1b0b;
}

.order-list-user-action {
    width: 100%;
    height: 60rpx;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.order-list-user-action view:not(:last-child) {
    margin-right: 20rpx;
}
.order-list-user-action-btn {
    /* position: absolute;
  top: 0;
  right: 10rpx; */
    color: #fffbf8;
    background-color: #ff8722;
    font-size: 28rpx;
    width: 164rpx;
    box-sizing: border-box;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 60rpx;
    /* margin-right: 20rpx; */
}
.order-list-user-action-btn1 {
    color: #ffffff;
    background-color: #d4d4d4;
    font-size: 28rpx;
    width: 164rpx;
    box-sizing: border-box;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 60rpx;
    /* margin-right: 20rpx; */
}
.order-list-user-action-btn2 {
    color: #ff8722;
    background-color: #ffffff;
    font-size: 28rpx;
    width: 164rpx;
    box-sizing: border-box;
    border: 1px solid #ff8722;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 60rpx;
    /* margin-right: 20rpx; */
}
.orderlist-server-name {
    color: #464545;
    float: left;
}
.orderlist-server-detail {
    float: left;
    margin-left: 5rpx;
}
</style>
